<style type="text/css">
	.content {
		text-align: center;
		padding: 0 30upx;
		border-top: 20upx solid #f7f7f7;
	}
	.identity{
		overflow: hidden;
		border-bottom: 1px solid #dddddd;
		line-height: 60upx;
		padding: 20upx 0;
	}
	.identity label{
		float: left;
		width: 30%;
		text-align: left;
	}
	.identity input{
		float: left;
		width: 70%;
		line-height: 60upx;
		font-size: 28upx;
		outline: none;
		height: 60upx;
		text-align: left;
	}
	.identity.tes{
		border: none;
		text-align: left;
	}
    .weixi{
        display: flex;
        justify-content:center;
        text-align: center;
        line-height: 60upx;
        color: #999999;
        font-size: 28upx;
        margin-top: 60upx;
    }
	.img_main{
		overflow: hidden;
	}
	.img_main_fl{
		float: left;
		width: 48%;
	}
	.img_main_fr{
		float: right;
		width: 48%;
	}
	.img_main image{
		width: 100%;
		height: 227upx;
		overflow: hidden;
	}
	.img_main text{
		text-align: center;
		display: block;
	}
	.img_main_center{
		font-size: 24upx;
		clear: both;
		text-align: left;
		background: #f7f7f7;
		padding: 20upx 30upx;
		color: #999999;
		margin-top: 10upx;
	}
   
	.centent{
		margin-top: 40upx;
		text-align: left;
	}
	.centent_top{
		font-size: 24upx;
		color: #e93246;
	}
	.centent_bot{
		margin-top: 10upx;
		color: #999999;
		font-size: 24upx;
		line-height: 36upx;
	}
	 .but{
	    display: block;
	    width: 80%;
	    margin: 100upx auto 0;
	    line-height: 80upx;
	    border-radius:40upx;
	    background: #333333;
	    color: #FFFFFF;
	    text-align: center;
	}
</style>
<template>
	<view class="content">
		<view class="identity">
			<label>身份证名字</label>
			<input type="text" maxlength="11" v-model="name" placeholder="请输入身份证所属姓名" @input="nameInput" id="mobile" /> 
		</view>
		<view class="identity">
			<label>身份证号</label>
			<input type="text" maxlength="18" v-model="identityCode" placeholder="请输入身份证号码" @input="identityCodeInput" id="mobile" /> 
		</view>
		<view class="identity tes">身份证正反面照片</view>
		<view class="img_main">
			<view class="img_main_fl">
				<image src="https://static.xpandago.net/wechat/images/ic_card_front.png" v-if="imgBoolean==true" class="slide-image" @tap="chooseImage" /></image>
				<image :src="zheng" class="slide-image" v-else="imgBoolean==false" @tap="chooseImage"/></image>
				<text>添加身份证正面</text>
			</view>
			<view class="img_main_fr">
				<image src="https://static.xpandago.net/wechat/images/ic_card_back.png" v-if="imgBoolean1==true" class="slide-image" @tap="chooseImage1"/></image>
				<image :src="fan" class="slide-image" v-else="imgBoolean1==false" @tap="chooseImage1"/></image>
				<text>添加身份证反面</text>
			</view>
		</view>
		<view class="img_main_center">注意:请上传原始比例的身份证正反照，请勿涂改，确保身份证信息清晰显示，否则无法通过审核</view>
		<view class="centent">
			<view class="centent_top">
				为什么要上传身份证信息？
			</view>
			<view class="centent_bot">
				根据海关相关规定，购买跨境商品需要办理清关手续;上传身份证信息，可确保您购买的商品顺利通过海关检查。我们承诺:您所传身份证信息仅用于办理跨境商品清关手续，系统加密保存，他人无法获取相关信息。
			</view>
		</view>
		<view class="but" id="showTooltips" @tap="showTooltips">上传</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	import { pathToBase64, base64ToPath } from '@/common/image-tools/index'
	export default {
		data() {
			return {
				name: "",  
				identityCode: "",
				zheng:'',
				fan:'',
				imgBoolean:true,//是否上传身份证正面
				imgBoolean1:true,//是否上传身份证背面
				token:''
			}
		},
		onLoad() {
			this.token=uni.getStorageSync('token')
			console.log(this.token)
			let code=this.GetQueryString('code');
			console.log(code)
			var pages = getCurrentPages(); // 当前页面
			var beforePage = pages[pages.length - 1]; // 获取当前页面的对象
			var url = beforePage.route //当前页面url
			uni.setStorageSync('url', url);
			console.log(url)
			if(this.token!=null && this.token !='' && this.token != undefined){
			}else if(code!=null && code !='' && code != undefined){
				this.loginCode(code)
			}else{
				uni.showToast({
					title: '请先登录！',
					icon: 'none'
				})
				setTimeout(() => {
					uni.reLaunch({
					  url: "/pages/login/loginWechat"
					})
				}, 1000);
			}
		},
		methods: {
			async loginCode(code){
				const [err, res] = await api.loginCode({
						query: {
							code:code
						}
					 });
				 console.log(res)
				 if(res.data.code == 0){
					 let token=res.data.data
					 this.token=token
					 uni.setStorageSync('token', token);
				 }else{
					 uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
					if(res.data.code==100){
						uni.removeStorageSync('token');
						setTimeout(() => {
							uni.reLaunch({
							  url: "/pages/login/loginWechat"
							})
						}, 1000);
					}
				 }
			},
			async gzhUploadCard(){
				const [err, res] = await api.gzhUploadCard({
					query: {
						 card:this.identityCode,
						 cardName :this.name,
						 cardFront:this.zheng,
						 cardBack:this.fan,
					},
					 header:{
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': this.token
					},
					method:'POST'
				 });
				 console.log(res)
				 if(res.data.code == 0){
					 uni.showToast({
					  	title: res.data.msg,
					  	icon: 'none'
					  })
					  setTimeout(() => {
						uni.navigateBack();
					  }, 1000);
				 }else{
					 uni.showToast({
					  	title: res.data.msg,
					  	icon: 'none'
					  })
				 }
			},
			 nameInput(e) {  
                this.name = e.target.value  
            }, 
			 identityCodeInput(e){
				 this.identityCode = e.target.value  
			 },
			 GetQueryString(name){
			     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			     var r = window.location.search.substr(1).match(reg);
			     if(r!=null)return  unescape(r[2]); return null;
			 },
			 //上传身份证正面
			 chooseImage: function () {
			 		// 选择图片
			 		uni.chooseImage({
			 			count: 1,//数量
			 		    sizeType: ['compressed'],//original 原图，compressed 压缩图，默认二者都有
			 		    sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
			 		    success: res => {
						    pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								this.zheng=base64
								this.imgBoolean=false
							 })
							 .catch(error => {
								console.error(error);
							 });
						}
			 		})
			 },
			 //上传身份证反面
			 chooseImage1: function () {
			 		// 选择图片
			 		uni.chooseImage({
						count: 1,//数量
			 		    sizeType: ['compressed'],//original 原图，compressed 压缩图，默认二者都有
			 		    sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
			 		    success: res => {
						    pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								this.fan=base64
								this.imgBoolean1=false
							 })
							 .catch(error => {
								console.error(error);
							 });
						}
			 		})
			 },
			 // 确认上传
			 showTooltips(){
				 this.gzhUploadCard()
			 }
		}
	}
</script>
